<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { isNumber } from 'xe-utils'

defineOptions({ name: 'ProIcon' })

const props = withDefaults(defineProps<Props>(), {
  size: '18px',
})

interface Props {
  icon?: any | undefined
  color?: string
  size?: string | number
}

const style = computed<CSSProperties>(() => {
  const { size, color } = props

  const style: CSSProperties = {
    fontSize: isNumber(size) ? `${size}px` : size,
  }

  if (color) {
    style.color = color
    style.fill = color
  }

  return style
})
</script>

<template>
  <i v-if="!icon" class="pro-icon" :style="style" v-bind="$attrs">
    <slot />
  </i>
  <component :is="icon" v-else class="svg-icon" :style="style" />
</template>

<style lang="less" scoped>
.pro-icon {
  height: 1em;
  width: 1em;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  // width: auto;
  // height: auto;
  // fill: currentColor;
  // vertical-align: middle;
  // flex-shrink: 0;
  // display: inline-block;
  // overflow: hidden;
  // float: left;
}
.svg-icon {
  // width: auto;
  // height: auto;
  // fill: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}
</style>
